import { PageContainer, ProTable } from '@ant-design/pro-components';
import { getBooksApi,deleteBookApi } from "@/services/book"
import { useState, useEffect,useRef } from "react"
import { useDispatch, useSelector } from '@umijs/max';
import TagContainer from "../components/tagContainer"
import { Image, Popconfirm, Button, Select, Space ,message} from "antd";
import { formatTime } from "@/utils/formatTime"
import {useNavigate} from 'umi'
export default function BookList() {
  const tableRef = useRef()

  const navigator = useNavigate()
  const dispatch = useDispatch();
  const {typeList} = useSelector(state=>state.type)
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(5);
  useEffect(()=>{
    if(typeList.length===0){
      // 请求数据
      dispatch({
        type:'type/_initList'
      })
    }else{
      console.log("已经有数据了,不用请求了")
    }
  },[])
  // 渲染书籍选项部分
  const selectOptions = typeList.map((item)=>{
    return {
      label:item.typeName,
      value:item._id
    }
  })
  function editBook(row) {
    const id = row._id;
    //跳转
    navigator('/book/editBook',{state:{id}})
   }
  // 删除书籍
  function confirm(row) { 
    // 删除书籍
    const id= row._id;
    deleteBookApi(id).then(res=>{
      tableRef.current.reload();
      message.success("删除成功")

    })
  }
  const columns = [
    {
      align: 'center',
      title: '序号',
      key: 'number',
      search:false,
      render: (_, rows, index) => {
        const value = (current - 1) * pageSize + index + 1
        return <span>{value}</span>
      }
    },
    {
      title: "书籍名称",
      align: 'center',
      dataIndex: 'bookTitle',
      key: 'bookTitle',
      width:150
    }, {
      title: "书籍分类",
      align: 'center',
      dataIndex: 'typeId',
      key: "typeId",
      render: (txt, rows) => {
        return <TagContainer typeId={txt} />
      },
      renderFormItem: (item, options, form) => {
        console.log(item)
        console.log(options)
        console.log(form)
        return (
          <Select
           
            options={selectOptions}
          />
        )
      }
    },
    {
      title: '书籍简介',
      align: 'center',
      dataIndex: 'bookIntro',
      key: 'bookIntro',
      search:false,
      render: (txt) => {
        // 做字符串切割
        const reg = /<[\/]?\w+>/g
        let tempStr = txt.replaceAll(reg, '');

        const showText = tempStr.slice(0, 15) + '....'
        return <div >{showText}</div>
      }

    },
    {
      title: '书籍封面',
      search:false,
      align: 'center',
      dataIndex: 'bookPic',
      key: 'bookPic',
      render: (txt) => {
        return <Image src={txt} width={50} />
      }
    },
    {
      search:false,
      title: '浏览数',
      align: 'center',
      dataIndex: 'scanNumber',
      key: 'scanNumber'
    },
    { 
       search:false,
      title: "评论数",
      align: 'center',
      dataIndex: 'commentNumber',
      key: 'commentNumber'
    },
    {
      search:false,
      title: '上架日期',
      align: "center",
      dataIndex: 'onShelfDate',
      key: 'onShelfDate',
      render: (txt) => {
        return <span>{formatTime(txt, true)}</span>
      }
    },
    {
      search:false,
      title: "操作",
      align: "center",
      key: "options",
      render: (_, rows) => {
        return (
          <>

            <Button type="link" size="small" onClick={() => { editBook(rows) }}>
              编辑
            </Button>
            <Popconfirm
              title="删除书籍"
              description="确定删除当前书籍"
              okText="确定"
              cancelText="取消"
              onConfirm={() => {
                confirm(rows);
              }}
            >
              <Button type="link" size="small" >
                删除
              </Button>
            </Popconfirm>
          </>
        )
      }
    }

  ]
  function handlePageChange(newPage) {
    console.log(newPage)
    setCurrent(newPage)
  }
  return (
    <PageContainer
      header={{
        breadcrumb: {
          items: [
            {
              title: '书籍',
            },
            {
              title: '书籍列表',
            },
          ],
        },
      }}
    >
      <ProTable
        actionRef={tableRef}
        pagination={{
          defaultPageSize: 5,
          onChange: handlePageChange
        }}
        request={async (params) => {
          params.current = current;
          params.pageSize = pageSize;
          console.log(params);
          const resp = await getBooksApi(params)
          console.log(resp)
          return {
            data: resp.data.data,
            success: true,
            total: resp.data.count
          }
        }}
        columns={columns}
        rowKey={(row) => row._id}

      ></ProTable>
    </PageContainer>
  );
}
